<script setup lang="ts">
</script>

<template>
  <div class="container">
    <div class="header">
      <div></div>
    <div class="title">工作职业可视化系统</div>
    </div>
    <div class="content">
      <router-view/>
    </div>

  </div>

</template>

<style lang="scss" scoped>
$bg-color: #FEFEFE;
$header-bg-color: #FEFEFE;
$title-bg-color: #95bde0;
.container{
  background-color: $bg-color;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  >.header{
    flex: 1;
    background-color: $header-bg-color;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    >.title{
      background-color: $title-bg-color;
      min-width: 200px;
      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: white;
      font-weight: 600;
      border: 20px solid #fff;
      border-image: url("./assets/border.png") 100 round;
    }
  }
  >.content{
    flex: 20;
    background-color: $header-bg-color;
  }
}
</style>
